<template>
  <div class="app-container">
    <el-form :model="queryParam" ref="queryForm" :inline="true">
      <el-form-item label="真实姓名：">
        <el-input v-model="queryParam.realName" clearable></el-input>
      </el-form-item>
      <el-form-item label="身份证号：">
        <el-input v-model="queryParam.idCard" clearable></el-input>
      </el-form-item>
      <el-form-item label="状态：">
        <el-select v-model="form.status" placeholder="状态">
          <el-option v-for="item in EnumMap.user.statusEnum" :key="item.key" :value="item.key"
            :label="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">查询</el-button>
        <el-button @click="clearForm">重置</el-button>
        <el-button type="success" class="link-left wdd-button-mini" @click="userSelectClick">
          添加
        </el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border fit highlight-current-row style="width: 100%">
      <el-table-column prop="id" label="Id" width="90px" />
      <el-table-column prop="realName" label="真实姓名" />
      <el-table-column prop="level" label="人员类别" />
      <el-table-column prop="idCard" label="身份证号" />
      <el-table-column prop="status" label="状态" />
      <el-table-column width="160px" label="操作" align="center">
        <template #default="{ row }">
          <el-button type="danger" @click="userDelete(row)" size="small" class="wdd-button-mini link-left">删除
          </el-button>
          <el-button type="danger" v-if="row.status == 1" @click="changeStatus(row)" size="small" class="wdd-button-mini link-left">禁用
          </el-button>
          <el-button type="success" v-if="row.status == 2" @click="changeStatus(row)" size="small" class="wdd-button-mini link-left">启用
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" v-model:page="queryParam.pageIndex"
      v-model:limit="queryParam.pageSize" @pagination="search" />
    <el-dialog v-model="userPageDialog" width="90%">
      <el-form :model="userPage.queryParam" ref="queryForm" :inline="true">
        <el-form-item label="用户名：">
          <el-input v-model="userPage.queryParam.userName" clearable></el-input>
        </el-form-item>
        <el-form-item label="真实姓名：">
          <el-input v-model="userPage.queryParam.realName" clearable></el-input>
        </el-form-item>
        <el-form-item label="职位：">
          <el-input v-model="userPage.queryParam.jobTitle" clearable></el-input>
        </el-form-item>
        <el-form-item label="人员类别：">
          <tree-select v-model="userPage.queryParam.departmentIdList" :data="departmentTree" :clearable="true"
            placeholder="人员类别" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="userQueryForm">查询</el-button>
          <!-- <el-button type="primary" @click="clearQueryForm">重置</el-button> -->
          <el-button type="primary" @click="submit">提交</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="userPage.listLoading" ref="userMultipleTable" :data="userPage.tableData" @select="useSelect"
        @select-all="useSelectAll" border fit highlight-current-row style="width: 100%">
        <el-table-column type="selection" width="40"></el-table-column>
        <!-- <el-table-column prop="id" label="Id" width="90px" /> -->
        <el-table-column prop="userName" label="用户名" />
        <el-table-column prop="realName" label="真实姓名" />
        <el-table-column prop="jobTitle" label="职位" />
        <el-table-column prop="departmentLevel" label="人员类别" />
        <el-table-column prop="sexStr" label="性别" width="60px;" />
        <el-table-column prop="phone" label="手机号" />
        <!-- <el-table-column prop="email" label="邮箱" /> -->
        <el-table-column prop="createTime" label="创建时间" width="160px" />
      </el-table>
      <pagination v-show="userPage.total > 0" :total="userPage.total" v-model:page="userPage.queryParam.pageIndex"
        v-model:limit="userPage.queryParam.pageSize" @pagination="userSearch" :autoScroll="false" />
    </el-dialog>
  </div>
</template>

<script>

import { adminPage, adminDelete } from '@/api/user'
import { EnumMap } from '@/api/EnumMap';
import { employeePage } from '@/api/user';
import { tree } from '@/api/department';
import useStore from '@/store';
import { wlPage, wlInsert, wlChangeStatus, wlDelete } from '@/api/user';
const { tagsView } = useStore();

export default {
  name: 'AdminList',
  data() {
    return {
      EnumMap: EnumMap,
      queryParam: {
        userName: null,
        idCard: null,
        status: null,
        pageIndex: 1,
        pageSize: 10
      },
      tableData: [],
      total: 0,
      canLoad: true,
      userPageDialog: false,
      departmentTree: [],
      form: {
        userIdList: [],
      },
      trainUserList: [],
      userPage: {
        queryParam: {
          userName: null,
          jobTitle: null,
          realName: null,
          departmentIdList: [],
          excludeDepartmentIdList: [],
          status: 1,
          pageIndex: 1,
          pageSize: 10
        },
        listLoading: false,
        tableData: [],
        total: 0
      },
    }
  },
  mounted() {
    this.init()
    this.canLoad = false
    tree().then(re => {
      console.log(re);
      this.departmentTree = re.response;
      console.log('  this.departmentTree', this.departmentTree);
    });
  },
  activated() {
    this.init()
  },
  deactivated() {
    this.canLoad = true
  },
  methods: {
    init() {
      if (!this.canLoad) {
        return
      }

      this.search()
    },
    search() {
      wlPage(this.queryParam).then(data => {
        const re = data.response
        this.tableData = re.list
        this.total = re.total
        this.queryParam.pageIndex = re.pageNum
      })
    },
    clearForm() {
      this.queryParam = {
        userName: null,
        idCard: null,
        status: null,
        pageIndex: 1,
        pageSize: 10
      }
      this.search()
    },
    clearQueryForm(){
      
    },
    userDelete(row) {
      this.$confirm('此操作将永久删除这条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        wlDelete(row.id).then(re => {
          if (re.code === 1) {
            this.search()
            this.$message.success(re.message)
          } else {
            this.$message.error(re.message)
          }
        })
      })
    },
    submitForm() {
      this.queryParam.pageIndex = 1
      this.search()
    },
    // 选择员工
    userSelectClick() {
      this.userPageDialog = true;
      this.userSearch();
    },
    userQueryForm() {
      this.userPage.queryParam.pageIndex = 1;
      this.userSearch();
    },
    useSelectAll(selection) {
      console.log(selection, '9999');
      if (selection.length === 0) {
        this.userPage.tableData.forEach(item => {
          this.useSelectArray(item, 3);
        });
      } else {
        selection.forEach(item => {
          this.useSelectArray(item, 2);
        });
      }
      this.$message.success('操作成功');
    },
    useSelectArray(userItem, action) {
      console.log(action,'89089080');
      console.log(userItem, '22222');
      let array = this.form.userIdList;
      let index = null;
      for (let i = 0; i < array.length; i++) {
        if (userItem.id === array[i].id) {
          index = i;
          console.log(index, 'index index index ');
        }
      }
      if (action === 1) {
        // revert
        if (index == null) {
          this.form.userIdList.push(
            userItem.id,
          );
        } else {
          this.form.userIdList.splice(index, 1);
        }
      } else if (action === 2) {
        // add
        if (index == null) {
          this.form.userIdList.push(
            userItem.id,
          );
        }
      } else if (action === 3) {
        // remove
        if (index != null) {
          this.form.userIdList.splice(index, 1);
        }
      }
      console.log(this.form.userIdList, '1111')
    },
    useSelect(selection, row) {
      console.log(selection);
      this.useSelectArray(row, 1);
      this.$message.success('操作成功');
    },
    userSearch() {
      this.userPage.listLoading = true;
      employeePage(this.userPage.queryParam)
        .then(data => {
          const re = data.response;
          this.userPage.tableData = re.list;
          this.userPage.total = re.total;
          this.userPage.queryParam.pageIndex = re.pageNum;
          this.$nextTick(() => {
            let userSelectList = this.trainUserList;
            this.userPage.tableData.forEach(row => {
              for (let i = 0; i < userSelectList.length; i++) {
                if (userSelectList[i].id === row.id) {
                  this.$refs.userMultipleTable.toggleRowSelection(row, true);
                }
              }
            });
          });
        })
        .finally(() => {
          this.userPage.listLoading = false;
        });
    },
    changeStatus(row) {
      wlChangeStatus({userId:row.id,status:row.status}).then(res => {
        console.log(res,'改变状态返回数据')
        this.$message.success(res.message)
        this.search()
      })
    },
    submit() {
      console.log(this.form, '原始数据');
      let obj = JSON.parse(JSON.stringify(this.form));
      console.log(111, obj);
      wlInsert(obj)
        .then(data => {
          if (data.code === 1) {
            this.$message.success(data.message);
            this.userPageDialog = false;
            this.search();
          } else {
            this.$message.error(data.message);
          }
        })
        .finally(() => {
          this.formLoading = false;
        });
      // }
      // })
    },
  }
}
</script>